<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>菜单查询调试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
        }
        .debug-section {
            margin: 20px 0;
            padding: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
        }
        .debug-button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 5px;
            cursor: pointer;
            margin: 5px;
        }
        .debug-button:hover {
            background: #0056b3;
        }
        .result {
            margin-top: 10px;
            padding: 10px;
            background: #f8f9fa;
            border-radius: 5px;
            white-space: pre-wrap;
            max-height: 400px;
            overflow-y: auto;
        }
        .error {
            color: red;
        }
        .success {
            color: green;
        }
        .info {
            color: blue;
        }
        .query-form {
            display: flex;
            gap: 10px;
            margin: 10px 0;
            align-items: center;
        }
        .query-form input {
            padding: 5px;
            border: 1px solid #ddd;
            border-radius: 3px;
        }
    </style>
</head>
<body>
    <h1>菜单查询功能调试</h1>
    
    <div class="debug-section">
        <h3>1. 测试基础API连接</h3>
        <button class="debug-button" onclick="testBasicConnection()">测试连接</button>
        <div id="connectionResult" class="result"></div>
    </div>

    <div class="debug-section">
        <h3>2. 获取所有菜单（原始数据）</h3>
        <button class="debug-button" onclick="getAllMenusRaw()">获取原始数据</button>
        <div id="rawMenusResult" class="result"></div>
    </div>

    <div class="debug-section">
        <h3>3. 测试查询参数</h3>
        <div class="query-form">
            <input type="text" id="menuNameInput" placeholder="菜单名称" value="管理">
            <button class="debug-button" onclick="testQueryParams()">测试查询参数</button>
        </div>
        <div id="queryParamsResult" class="result"></div>
    </div>

    <div class="debug-section">
        <h3>4. 测试数据处理</h3>
        <button class="debug-button" onclick="testDataProcessing()">测试数据处理</button>
        <div id="dataProcessingResult" class="result"></div>
    </div>

    <div class="debug-section">
        <h3>5. 模拟前端查询逻辑</h3>
        <div class="query-form">
            <input type="text" id="frontendMenuName" placeholder="菜单名称" value="管理">
            <button class="debug-button" onclick="simulateFrontendQuery()">模拟前端查询</button>
        </div>
        <div id="frontendQueryResult" class="result"></div>
    </div>

    <script>
        const baseUrl = 'http://localhost:5095';

        async function makeRequest(url, resultElement, showRaw = false) {
            try {
                resultElement.innerHTML = '请求中...';
                resultElement.className = 'result info';
                
                console.log('请求URL:', url);
                const response = await fetch(url);
                console.log('响应状态:', response.status);
                
                const data = await response.json();
                console.log('响应数据:', data);
                
                if (data.success) {
                    if (showRaw) {
                        resultElement.innerHTML = JSON.stringify(data, null, 2);
                    } else {
                        resultElement.innerHTML = `成功: ${JSON.stringify(data, null, 2)}`;
                    }
                    resultElement.className = 'result success';
                } else {
                    resultElement.innerHTML = `错误: ${data.message}`;
                    resultElement.className = 'result error';
                }
            } catch (error) {
                console.error('请求失败:', error);
                resultElement.innerHTML = `请求失败: ${error.message}`;
                resultElement.className = 'result error';
            }
        }

        function testBasicConnection() {
            makeRequest(`${baseUrl}/api/menu`, document.getElementById('connectionResult'));
        }

        function getAllMenusRaw() {
            makeRequest(`${baseUrl}/api/menu`, document.getElementById('rawMenusResult'), true);
        }

        function testQueryParams() {
            const menuName = document.getElementById('menuNameInput').value;
            const url = `${baseUrl}/api/menu?Menuname=${encodeURIComponent(menuName)}`;
            makeRequest(url, document.getElementById('queryParamsResult'));
        }

        function testDataProcessing() {
            // 模拟后端返回的数据结构
            const mockData = {
                success: true,
                data: {
                    menuTree: [
                        {
                            Id: "77777777-7777-7777-7777-777777777777",
                            Menuname: "系统管理",
                            MenuPath: "/system",
                            MenuIcon: "SettingOutlined",
                            ParentId: null,
                            Order: 1,
                            PermissionKey: "system",
                            Children: [
                                {
                                    Id: "88888888-8888-8888-8888-888888888888",
                                    Menuname: "用户管理",
                                    MenuPath: "/system/users",
                                    MenuIcon: "UserOutlined",
                                    ParentId: "77777777-7777-7777-7777-777777777777",
                                    Order: 1,
                                    PermissionKey: "system:user",
                                    Children: []
                                }
                            ]
                        }
                    ],
                    totalCount: 4
                }
            };

            // 测试数据处理函数
            const flattenMenuTree = (menuTree) => {
                const result = [];
                const flatten = (menus) => {
                    menus.forEach(menu => {
                        result.push({
                            id: menu.Id || menu.id,
                            menuname: menu.Menuname || menu.menuname,
                            menuPath: menu.MenuPath || menu.menuPath,
                            menuIcon: menu.MenuIcon || menu.menuIcon,
                            parentId: menu.ParentId || menu.parentId,
                            order: menu.Order || menu.order,
                            permissionKey: menu.PermissionKey || menu.permissionKey,
                            createdAt: menu.CreatedAt || menu.createdAt || new Date().toISOString(),
                            updatedAt: menu.UpdatedAt || menu.updatedAt || new Date().toISOString()
                        });
                        if (menu.Children && menu.Children.length > 0) {
                            flatten(menu.Children);
                        } else if (menu.children && menu.children.length > 0) {
                            flatten(menu.children);
                        }
                    });
                };
                flatten(menuTree);
                return result;
            };

            const processedData = flattenMenuTree(mockData.data.menuTree);
            const resultElement = document.getElementById('dataProcessingResult');
            resultElement.innerHTML = `原始数据:\n${JSON.stringify(mockData.data.menuTree, null, 2)}\n\n处理后数据:\n${JSON.stringify(processedData, null, 2)}`;
            resultElement.className = 'result success';
        }

        async function simulateFrontendQuery() {
            const menuName = document.getElementById('frontendMenuName').value;
            const resultElement = document.getElementById('frontendQueryResult');
            
            try {
                resultElement.innerHTML = '模拟前端查询中...';
                resultElement.className = 'result info';
                
                // 构建查询参数（模拟前端逻辑）
                const params = {
                    pageIndex: 1,
                    pageSize: 20
                };
                
                if (menuName?.trim()) {
                    params.Menuname = menuName.trim();
                }
                
                console.log('查询参数:', params);
                
                // 构建URL
                const queryString = new URLSearchParams(params).toString();
                const url = `${baseUrl}/api/menu?${queryString}`;
                
                console.log('请求URL:', url);
                
                const response = await fetch(url);
                const data = await response.json();
                
                console.log('响应数据:', data);
                
                if (data.success) {
                    // 模拟前端数据处理
                    const flattenMenuTree = (menuTree) => {
                        const result = [];
                        const flatten = (menus) => {
                            menus.forEach(menu => {
                                result.push({
                                    id: menu.Id || menu.id,
                                    menuname: menu.Menuname || menu.menuname,
                                    menuPath: menu.MenuPath || menu.menuPath,
                                    menuIcon: menu.MenuIcon || menu.menuIcon,
                                    parentId: menu.ParentId || menu.parentId,
                                    order: menu.Order || menu.order,
                                    permissionKey: menu.PermissionKey || menu.permissionKey,
                                    createdAt: menu.CreatedAt || menu.createdAt || new Date().toISOString(),
                                    updatedAt: menu.UpdatedAt || menu.updatedAt || new Date().toISOString()
                                });
                                if (menu.Children && menu.Children.length > 0) {
                                    flatten(menu.Children);
                                } else if (menu.children && menu.children.length > 0) {
                                    flatten(menu.children);
                                }
                            });
                        };
                        flatten(menuTree);
                        return result;
                    };
                    
                    const flattenMenus = flattenMenuTree(data.data.menuTree);
                    
                    resultElement.innerHTML = `查询成功!\n\n原始数据:\n${JSON.stringify(data.data, null, 2)}\n\n处理后数据:\n${JSON.stringify(flattenMenus, null, 2)}`;
                    resultElement.className = 'result success';
                } else {
                    resultElement.innerHTML = `查询失败: ${data.message}`;
                    resultElement.className = 'result error';
                }
            } catch (error) {
                console.error('模拟查询失败:', error);
                resultElement.innerHTML = `模拟查询失败: ${error.message}`;
                resultElement.className = 'result error';
            }
        }

        // 页面加载时自动测试连接
        window.onload = function() {
            testBasicConnection();
        };
    </script>
</body>
</html> 